<template>
	<view class="">
		<!-- 轮播图 -->
		<u-swiper :interval="3000" effect3d :list="list"></u-swiper>
		<!-- list列表 -->
		<view class="flex flex-wrap mt-1">
			<view class="listBtn position-relative"  v-for="(item,index) in 10" :key="index" @click="openLive">
				<image src="../../static/demo/1.jpg" class="rounded" mode="aspectFill" style="width: 365rpx;height: 365rpx;"></image>
				<view class="position-absolute rounded flex align-center justify-center listItemtl">
					<text class="iconfont iconbizhongguanli text-warning font-sm"></text>
					<text class="text-white font-sm ml-1">0</text>
				</view>
				<view class="position-absolute rounded flex align-center justify-center listItemtr"><text class="text-white font-sm">人气：0</text></view>
				<view class="position-absolute rounded flex align-center justify-center listItembl"><text class="text-white font-sm">哈哈哈</text></view>
				<view class="position-absolute rounded flex align-center justify-center listItembr">
					<view class="rounded-circle redRounded" />
					<text class="text-white font-sm ml-1">已结束</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					image: '../../static/demo/banner/1.jpg'
				},
				{
					image: '../../static/demo/banner/2.jpg'
				},
				{
					image: '../../static/demo/banner/1.jpg'
				}
			]
		};
	},
	methods: {
		openLive(){
			uni.navigateTo({
				url:"../live/live"
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.listBtn {
	width: 375rpx;
	padding: 5rpx;
	box-sizing: border-box;
}
.listItemtl {
	width: 100rpx;
	height: 50rpx;
	background-color: rgba(0, 0, 0, 0.4);
	top: 15rpx;
	left: 15rpx;
}
.listItemtr {
	width: 100rpx;
	height: 50rpx;
	background-color: rgba(0, 0, 0, 0.4);
	top: 15rpx;
	right: 15rpx;
}
.listItembl {
	width: 100rpx;
	height: 50rpx;
	background-color: rgba(0, 0, 0, 0.4);
	bottom: 25rpx;
	left: 15rpx;
}
.listItembr {
	width: 100rpx;
	height: 50rpx;
	background-color: rgba(0, 0, 0, 0.4);
	bottom: 25rpx;
	right: 15rpx;
	.redRounded {
		width: 15rpx;
		height: 15rpx;
		background-color: red;
	}
}
</style>
